<template>
  <div class="recommend_wrap" v-if="recommendData.sugs[0].sug.length > 0">
    <div class="recommend_wrap_content">
      <div
        :class="{ clickSub: !showSub }"
        class="recommend_title"
        v-if="sugTitle != ''"
        v-html="sugTitle"
      />
      <ul v-if="showSub" class="node_con">
        <template>
          <li
            @click="clickSugItem(recommendData.sugs[0], index)"
            class="item_content item_one_content"
            :class="{
                add_no_bordertop: index === 0,
                add_border_radius1:
                  index === recommendData.sugs[0].sug.length - 1,
                add_border_radius_top: index === 0 && sugTitle === '',
              }"
            v-show="index < showNum && !sugItem.hide"
            v-for="(sugItem, index) in recommendData.sugs[0].sug"
            :key="index"
          >
            <div class="subTitleItem">
              <!-- v-if="showindex" -->
              <!-- <span
                :style="{
                    color:
                      index < colors.length - 1
                        ? colors[index]
                        : colors[Math.floor(Math.random() * 10)],
                  }"
              >{{ Number(index) + 1 }}&nbsp;&nbsp;</span>-->
              {{ sugItem["display_sug"] }}
            </div>
            <!-- <img :src="require('@/assets/images/icon-arrow-right.png')" class="item_content_arrow" /> -->
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  detectDeviceType,
  _getRandomUserId,
  _getSessionCode,
  _getSessionId,
  getRandomStr,
  getReqid
} from "@/utils/common";
export default {
  props: { session: Object },
  data() {
    return {
      questionParams: {},
      curNum: null,
      showNum: 4,
      showSubNum: 4,
      refrenceNum: 4,
      showCheckMoreWord: "查看更多",
      showSub: true,
      // 颜色数组
      colors: [
        "#E93131",
        "#ED7E24",
        "#FD6647",
        "#FEB115",
        "#800080",
        "#FF1493",
        "#1E90FF",
        "#00BFFF",
        "#F08080",
        "#323232"
      ]
    };
  },
  created() {
    this.session.answerData.showSub = true;
    if (this.session.update) {
      this.session.update();
    }
  },
  methods: {
    clickSugItem(sugsItem, index, key) {
      this.$emit("questiondetails", sugsItem.sug[index].click_sug);
      let user_id = _getRandomUserId();
      let source = "b_customer_trail_04";
      let channel = "other";
      const params = {
        question: sugsItem.sug[index].click_sug,
        event: JSON.stringify({
          eventId: "click",
          question: sugsItem.sug[index].click_sug
        }),
        entity_info: JSON.stringify({ device_type: detectDeviceType() }),
        source: source,
        user_id: user_id,
        session_code: _getSessionCode(32, 16),
        session_id: _getSessionId(user_id, source),
        add_info: JSON.stringify({
          command: { needCommand: true },
          zhengu: {},
          talk: { needIdentify: true, needImg: true },
          finance: {
            ans_type: "NORMAL",
            needFurther: true,
            needFurtherKnow: true
          },
          soniu: { needEliminate: true },
          urp: { keyValue: {}, custId: "" },
          recommend_version: "1.0",
          entranceId: "",
          stockName: "同花顺"
        }),
        localMode: [
          "zhengu",
          "iwencai",
          "soniu",
          "kefu",
          "command",
          "news",
          "talk",
          "sensitive",
          "finance"
        ],
        multistage: JSON.stringify({ is_multistage: false }),
        qaDataOrigin: "commonRobot",
        user_name: getRandomStr(10),
        version: 2.0,
        answerChannel: `${detectDeviceType()}_${channel}`,
        mode: "preCloud",
        logid: `${user_id}${new Date().getTime()}`,
        reqid: getReqid(),
        language: "zh-CN"
      };
      this.$emit("click-sug-item", params);
    }
  },
  computed: {
    chatObj: function() {
      return this.session.response.answer[0];
    },
    recommendData: function() {
      return {
        sugs: this.chatObj.sugArr[0] ? this.chatObj.sugArr[0].sugs : [],
        sugsTitle: this.chatObj.sugArr[0]
          ? this.chatObj.sugArr[0].sug_title
          : ""
      };
    },
    sugTitle: function() {
      let sugTitle = this.recommendData.sugsTitle;
      if (sugTitle === "你还可以继续问我:") {
        sugTitle = "相关推荐问题";
      }
      //  if(this.isGuangfaStyle)
      return sugTitle ? sugTitle : "相关推荐问题";
    },

    showIndex: function() {
      let flag = false;
      if (this.isGuangfaStyle) {
        return flag;
      }
      flag = true;
      return flag;
    }
  }
};
</script>
<style lang="less" scoped>
@import (once) "@/styles/variable.less";
/* 诊股选股推荐样式 */
.recommend_wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 15px;
}
.recommend_wrap_content {
  width: 320px;
  // margin: 0 10px;
}
.recommend_title {
  // background: @white-color-1;
  border-radius: 8px 8px 0 0;
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  &::after {
    display: flex;
    content: "";
    width: 100%;
    height: 1px;
    background: @white-color-5;
    margin-top: 10px;
  }
}

.clickSub {
  background-color: @white-color-1;
  color: #000000;
}

.click_title {
  color: @black-color-1;
  overflow: hidden;
  padding: 0.32rem 0.7rem 0.32rem 0.48rem;
  position: relative;
  -webkit-tap-highlight-color: @black-color-a-1;
  cursor: pointer;
  word-break: break-all;
  word-wrap: break-word;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.check_more {
  padding: 0.32rem 0.48rem;
  color: @primary-1;
  border-top: 1px solid @white-color-5;
  font-size: 0.6rem;
}

.item_content {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  // background: @white-color-3;

  color: @black-color-5;
  cursor: pointer;
  -webkit-tap-highlight-color: @black-color-a-5;
  padding: 0px 16px 10px 0px;
  /*line-height: 0.84rem;*/
  word-break: break-all;
  word-wrap: break-word;
  font-size: 16px;
  line-height: 24px;
  border-radius: 8px;
}

.item_one_content {
  color: #007df0;
  // padding: 10px;
  // margin-bottom: 10px;
  display: block;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .subTitleItem {
    padding: 10px;
    border-radius: 8px;
    background: #daebfa;
  }
}

.item_content_arrow {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.sub_node_con {
  overflow-x: hidden;
}

.set_recommend_style .info_box {
  padding: 0;
  width: 100%;
}

.set_recommend_style .info_box .arrow_left {
  border-color: transparent transparent transparent @primary-1;
}

/*无选项推荐模块修正样式*/
.no_choose_recommend_style .info_box {
  width: auto;
}

.no_choose_recommend_style .info_box .arrow_left {
  border-color: transparent transparent transparent @white-color-1;
}

.no_choose_recommend_style .recommend_title {
  background: none;
  color: @black-color-1;
}

.item_title,
.check_more {
  background-color: @white-color-1;
}

.hide {
  display: none;
}

.add_border_radius1 {
  border-radius: 0 0 8px 8px;
  padding-bottom: 16px;
}
.add_border_radius_top {
  border-radius: 0.36rem 0.36rem 0 0;
}
.add-more {
  background: @white-color-1;
  color: @primary-1;

  padding: 6px;
  border-bottom: 1px solid @white-color-1;
}
</style>
